<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>添加备件</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!--标准mui.css-->
    <link rel="stylesheet" href="../../css/mui.min.css">
    <link rel="stylesheet" href="../../css/iconfont.css" />
    <!--App自定义的css-->
    <link rel="stylesheet" type="text/css" href="../../css/app.css"/>
    <link href="../../css/mui.indexedlist.css" rel="stylesheet" />
    <style>
        * { touch-action: none; }
        html, body {
            height: 100%;
            overflow: auto;
        }
        .mui-bar {
            -webkit-box-shadow: none;
            box-shadow: none;
        }

        body{
            background: #ffffff;
        }
        .oa-contact-cell.mui-table .mui-table-cell {
            padding: 11px 0;
            vertical-align: middle;
        }

        .oa-contact-avatar img {
            border-radius: 50%;
        }

        .oa-contact-name, oa-contact-position {
            float: left;
        }
        .mui-bar{
            background:#4F77AA ;
            color: #ffffff;
            -webkit-box-shadow: 0 0 1px rgba(0,0,0,0);
            box-shadow: 0 0 1px rgba(0,0,0,0);
        }
        .mui-title{
            color: #ffffff;
        }
        a{
            color:#ffffff;
        }
        .mui-content{
            background: #ffffff;
        }
        .mui-content-item ul li .mui-pull-left{
            width: 60px;
            height: 60px;
            max-width: 60px;
            text-align: center;
            line-height: 60px;
            font-size: 16px;
            color: #ffffff;
        }

        .mui-content ul li a span{
            /*padding-right: 15px;*/
            /*color:#4F77AA ;*/
        }
        .mui-search input.seach{
            width: 70%;
            padding-left: 30px;
            margin: 0;
            border-radius: 50px 50px;
            font-size:14px;
        }
        .mui-search input.seach_button{
            width:80px;
            height:40px;
            color:#ffffff;
            background: #4F77AA;
            border-radius: 5px;
        }
        .mui-search{
            padding: 15px;
            border-bottom: 2px solid #dddddd;
        }
        .mui-search i{
            font-size: 24px;
            position: absolute;
            left: 20px;
            margin-top:10px;
        }
        .mui-select select{
            background: #EFEFF4;
            border-radius: 0;
        }
        .mui-select-content{
            width:100%;
            height:41px;
            background: #EFEFF4;
        }
        .mui-content{
            width:100%;
            height:100%;
        }
        .mui-content-item{
            width:100%;
            height:100%;
        }
        .bottom_submit{
            position: absolute;
            width: 100%;
            height: 48px;
            text-align: center;
            line-height: 48px;
            bottom: 0;
            background: #4F77AA;
        }
       .bottom_submit input[type=button]{
            width:50%;
            height:48px;
            line-height: 48px;
            background:#4F77AA ;
            border:none;
            padding: 0;
            float: left;
            color: #ffffff;
        }
        .bottom_submit input[type=button]#add{
              border-right:1px solid #dddddd;
              box-sizing:border-box;
        }
        .mui-content-item .mui-control-content{
            width:100%;
            height:100%;
        }
       .mui-content-item ul li p span.info{
           float:right;
           padding-right:15px;
           color:red;
           font-size: 16px;
       }
        .mui-popup-title{
            text-align: left;
        }
        .clear{
            clear: both;
        }
        .mui-content-item ul li span.title{
            width: auto;
            float: left;
            color:#8f8f94;
            font-size: 14px;
        }
        .mui-content-item ul li p.content{
            float: left;
        }

    </style>
</head>

<body>

<div class="mui-content">
    <div class="mui-search">
        <label><i class="icon iconfont icon-sousuo"></i></label><input class="seach" type="text"  placeholder="单号"/>
        <input class="seach_button" type="button" value="搜索">
    </div>
    <div class="segmentedControl" style="padding: 10px 10px;">
            <div id="segmentedControl" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-primary">
                <p class="mui-control-item item1 mui-active">全部备件</p>
                <p class="mui-control-item item2">全部备件2</p>
            </div>
    </div>
    <div class="mui-content-item">
        <div id="item11" class="mui-control-content" style="display:block;">
            <div id="scroll" class="mui-scroll-wrapper">
                <div class="mui-scroll">
                    <ul class="mui-table-view" style="padding-bottom:115px;">
                        <li class="mui-table-view-cell mui-media li0" data-value="0" onclick="sparepartNumber(0,this)">
                                <div class="mui-media-body">
                                    <p class='mui-ellipsis code'>CK-20190827001</p>
                                    <p class='mui-ellipsis name'>仓库：仓库1</p>
                                    <p class='mui-ellipsis type'>类型：领用出库</p>
                                    <p class='mui-ellipsis parepart'>备件：意美吉双头锯-继电器...</p>
                                    <p class='mui-ellipsis number'><span class="info" style="display:none;">已选：<span class="infoSum">0</span></span></p>
                                </div>
                        </li>
                        <li class="mui-table-view-cell mui-media" data-value="1" onclick="sparepartNumber(1,this)">
                                <div class="mui-media-body">
                                    <p class='mui-ellipsis code'>CK-2222222222222222222222</p>
                                    <p class='mui-ellipsis name'>仓库：仓库1</p>
                                    <p class='mui-ellipsis type'>类型：领用出库</p>
                                    <p class='mui-ellipsis parepart'>备件：意美吉双头锯-继电器...</p>
                                    <p class='mui-ellipsis number'><span class="info" style="display:none;">已选：<span class="infoSum">0</span></span></p>
                                </div>
                        </li>
                        <!--图标是图-->
                        <!--<li class="mui-table-view-cell mui-media">
                                <img class="mui-media-object mui-pull-left" src="../../img/shuijiao.jpg">
                                <div class="mui-media-body">
                                    <p class='mui-ellipsis'>计划编号：20190825001</p>
                                    <p class='mui-ellipsis'>计划名称：日检</p>
                                    <p class='mui-ellipsis'>位置范围：</p>
                                    <p class='mui-ellipsis'>计划时间：08-25 13.51 至 08-25 15.51</p>
                                </div>
                        </li>-->
                        <li class="mui-table-view-cell mui-media" data-value="2" onclick="sparepartNumber(2,this)">
                                <div class="mui-media-body">
                                    <p class='mui-ellipsis code'>CK-..............</p>
                                    <p class='mui-ellipsis name'>仓库：仓库1</p>
                                    <p class='mui-ellipsis type'>类型：领用出库</p>
                                    <p class='mui-ellipsis parepart'>备件：意美吉双头锯-继电器...</p>
                                    <p class='mui-ellipsis number'><span class="info" style="display:none;">已选：<span class="infoSum">0</span></span></p>
                                </div>
                        </li>
                        <li class="mui-table-view-cell mui-media" data-value="2" onclick="sparepartNumber(3,this)">
                            <div class="mui-media-body">
                                <p class='mui-ellipsis code'>CK3-..............</p>
                                <p class='mui-ellipsis name'>仓库：仓库1</p>
                                <p class='mui-ellipsis type'>类型：领用出库</p>
                                <p class='mui-ellipsis parepart'>备件：意美吉双头锯-继电器...</p>
                                <p class='mui-ellipsis number'><span class="info" style="display:none;">已选：<span class="infoSum">0</span></span></p>
                            </div>
                        </li>
                        <li class="mui-table-view-cell mui-media" data-value="2" onclick="sparepartNumber(4,this)">
                            <div class="mui-media-body">
                                <p class='mui-ellipsis code'>CK4-..............</p>
                                <p class='mui-ellipsis name'>仓库：仓库1</p>
                                <p class='mui-ellipsis type'>类型：领用出库</p>
                                <p class='mui-ellipsis parepart'>备件：意美吉双头锯-继电器...</p>
                                <p class='mui-ellipsis number'><span class="info" style="display:none;">已选：<span class="infoSum">0</span></span></p>
                            </div>
                        </li>
                        <li class="mui-table-view-cell mui-media" data-value="2" onclick="sparepartNumber(5,this)">
                            <div class="mui-media-body">
                                <p class='mui-ellipsis code'>CK5-..............</p>
                                <p class='mui-ellipsis name'>仓库：仓库1</p>
                                <p class='mui-ellipsis type'>类型：领用出库</p>
                                <p class='mui-ellipsis parepart'>备件：意美吉双头锯-继电器...</p>
                                <p class='mui-ellipsis number'><span class="info" style="display:none;">已选：<span class="infoSum">0</span></span></p>
                            </div>
                        </li>
                        <li class="mui-table-view-cell mui-media" data-value="2" onclick="sparepartNumber(6,this)">
                            <div class="mui-media-body">
                                <p class='mui-ellipsis code'>CK6-..............</p>
                                <p class='mui-ellipsis name'>仓库：仓库1</p>
                                <p class='mui-ellipsis type'>类型：领用出库</p>
                                <p class='mui-ellipsis parepart'>备件：意美吉双头锯-继电器...</p>
                                <p class='mui-ellipsis number'><span class="info" style="display:none;">已选：<span class="infoSum">0</span></span></p>
                            </div>
                        </li>
                        <li class="mui-table-view-cell mui-media" data-value="2" onclick="sparepartNumber(7,this)">
                            <div class="mui-media-body">
                                <p class='mui-ellipsis code'>CK7-..............</p>
                                <p class='mui-ellipsis name'>仓库：仓库1</p>
                                <p class='mui-ellipsis type'>类型：领用出库</p>
                                <p class='mui-ellipsis parepart'>备件：意美吉双头锯-继电器...</p>
                                <p class='mui-ellipsis number'><span class="info" style="display:none;">已选：<span class="infoSum">0</span></span></p>
                            </div>
                        </li>
                        <li class="mui-table-view-cell mui-media" data-value="2" onclick="sparepartNumber(8,this)">
                            <div class="mui-media-body">
                                <p class='mui-ellipsis code'>CK8-..............</p>
                                <p class='mui-ellipsis name'>仓库：仓库1</p>
                                <p class='mui-ellipsis type'>类型：领用出库</p>
                                <p class='mui-ellipsis parepart'>备件：意美吉双头锯-继电器...</p>
                                <p class='mui-ellipsis number'><span class="info" style="display:none;">已选：<span class="infoSum">0</span></span></p>
                            </div>
                        </li>
                        <li class="mui-table-view-cell mui-media" data-value="2" onclick="sparepartNumber(9,this)">
                            <div class="mui-media-body">
                                <p class='mui-ellipsis code'>CK9-..............</p>
                                <p class='mui-ellipsis name'>仓库：仓库1</p>
                                <p class='mui-ellipsis type'>类型：领用出库</p>
                                <p class='mui-ellipsis parepart'>备件：意美吉双头锯-继电器...</p>
                                <p class='mui-ellipsis number'><span class="info" style="display:none;">已选：<span class="infoSum">0</span></span></p>
                            </div>
                        </li>
                        <li class="mui-table-view-cell mui-media" data-value="2" onclick="sparepartNumber(10,this)">
                            <div class="mui-media-body">
                                <p class='mui-ellipsis code'>CK10-..............</p>
                                <p class='mui-ellipsis name'>仓库：仓库1</p>
                                <p class='mui-ellipsis type'>类型：领用出库</p>
                                <p class='mui-ellipsis parepart'>备件：意美吉双头锯-继电器...</p>
                                <p class='mui-ellipsis number'><span class="info" style="display:none;">已选：<span class="infoSum">0</span></span></p>
                            </div>
                        </li>
                        <!--<li class="mui-table-view-cell mui-media">
                                <div class="mui-media-body">
                                    <p class='mui-ellipsis'>CK-20190827001</p>
                                    <p class='mui-ellipsis'>仓库：仓库1</p>
                                    <p class='mui-ellipsis'>类型：领用出库</p>
                                    <p class='mui-ellipsis'>备件：意美吉双头锯-继电器...</p>
                                </div>
                        </li>
                        <li class="mui-table-view-cell mui-media">
                                <div class="mui-media-body">
                                    <p class='mui-ellipsis'>CK-20190827001</p>
                                    <p class='mui-ellipsis'>仓库：仓库1</p>
                                    <p class='mui-ellipsis'>类型：领用出库</p>
                                    <p class='mui-ellipsis'>备件：意美吉双头锯-继电器...</p>
                                </div>
                        </li>
                        <li class="mui-table-view-cell mui-media">
                                <div class="mui-media-body">
                                    <p class='mui-ellipsis'>CK-20190827001</p>
                                    <p class='mui-ellipsis'>仓库：仓库1</p>
                                    <p class='mui-ellipsis'>类型：领用出库</p>
                                    <p class='mui-ellipsis'>备件：意美吉双头锯-继电器...</p>
                                </div>
                        </li>
                        <li class="mui-table-view-cell mui-media">
                                <div class="mui-media-body">
                                    <p class='mui-ellipsis'>CK-20190827001</p>
                                    <p class='mui-ellipsis'>仓库：仓库1</p>
                                    <p class='mui-ellipsis'>类型：领用出库</p>
                                    <p class='mui-ellipsis'>备件：意美吉双头锯-继电器...</p>
                                </div>
                        </li>
                        <li class="mui-table-view-cell mui-media">
                                <div class="mui-media-body">
                                    <p class='mui-ellipsis'>CK-20190827001</p>
                                    <p class='mui-ellipsis'>仓库：仓库1</p>
                                    <p class='mui-ellipsis'>类型：领用出库</p>
                                    <p class='mui-ellipsis'>备件：意美吉双头锯-继电器...</p>
                                </div>
                        </li>-->
                    </ul>
                </div>
            </div>
        </div>
        <div id="item22" class="mui-control-content"><!-- style="display:none;"-->
            <div id="scroll0" class="mui-scroll-wrapper">
                <div class="mui-scroll">
                    <ul class="mui-table-view" style="padding-bottom:115px;">
                        <li class="mui-table-view-cell mui-media" onclick="sparepartNumber(0,this)">
                                <div class="mui-media-body">
                                    <p class='mui-ellipsis code'>111111</p>
                                    <p class='mui-ellipsis name'>仓库：仓库1</p>
                                    <p class='mui-ellipsis type'>类型：领用出库</p>
                                    <p class='mui-ellipsis parepart'>备件：意美吉双头锯-继电器...</p>
                                    <p class='mui-ellipsis number'><span class="info" style="display:none;">已选：<span class="infoSum">0</span></span></p>
                                </div>
                        </li>
                        <li class="mui-table-view-cell mui-media" onclick="sparepartNumber(1,this)">
                                <div class="mui-media-body">
                                    <p class='mui-ellipsis'>CK-20190827001</p>
                                    <p class='mui-ellipsis'>仓库：仓库1</p>
                                    <p class='mui-ellipsis'>类型：领用出库</p>
                                    <p class='mui-ellipsis'>备件：意美吉双头锯-继电器...<span class="info" style="display:none;">已选：<span class="infoSum">0</span></span></p>
                                </div>
                        </li>
                        <!--图标是图-->
                        <!--<li class="mui-table-view-cell mui-media">
                                <img class="mui-media-object mui-pull-left" src="../../img/shuijiao.jpg">
                                <div class="mui-media-body">
                                    <p class='mui-ellipsis'>计划编号：20190825001</p>
                                    <p class='mui-ellipsis'>计划名称：日检</p>
                                    <p class='mui-ellipsis'>位置范围：</p>
                                    <p class='mui-ellipsis'>计划时间：08-25 13.51 至 08-25 15.51</p>
                                </div>
                        </li>-->
                        <li class="mui-table-view-cell mui-media">
                                <div class="mui-media-body">
                                    <p class='mui-ellipsis'>CK-20190827001</p>
                                    <span class="title">仓库仓库：</span><p class='mui-ellipsis content'>仓库1</p>
                                    <div class="clear"></div>
                                    <span class="title">类型：</span><p class='mui-ellipsis content'>类型：领用出库</p>
                                    <div class="clear"></div>
                                    <p class='mui-ellipsis'>备件：意美吉双头锯-继电器...</p>
                                </div>
                        </li>
                        <li class="mui-table-view-cell mui-media">
                                <div class="mui-media-body">
                                    <p class='mui-ellipsis'>CK-20190827001</p>
                                    <p class='mui-ellipsis'>仓库：仓库1</p>
                                    <p class='mui-ellipsis'>类型：领用出库</p>
                                    <p class='mui-ellipsis'>备件：意美吉双头锯-继电器...</p>
                                </div>
                        </li>
                        <li class="mui-table-view-cell mui-media">
                                <div class="mui-media-body">
                                    <p class='mui-ellipsis'>CK-20190827001</p>
                                    <p class='mui-ellipsis'>仓库：仓库1</p>
                                    <p class='mui-ellipsis'>类型：领用出库</p>
                                    <p class='mui-ellipsis'>备件：意美吉双头锯-继电器...</p>
                                </div>
                        </li>
                        <li class="mui-table-view-cell mui-media">
                                <div class="mui-media-body">
                                    <p class='mui-ellipsis'>CK-20190827001</p>
                                    <p class='mui-ellipsis'>仓库：仓库1</p>
                                    <p class='mui-ellipsis'>类型：领用出库</p>
                                    <p class='mui-ellipsis'>备件：意美吉双头锯-继电器...</p>
                                </div>
                        </li>
                        <li class="mui-table-view-cell mui-media">
                                <div class="mui-media-body">
                                    <p class='mui-ellipsis'>CK-20190827001</p>
                                    <p class='mui-ellipsis'>仓库：仓库1</p>
                                    <p class='mui-ellipsis'>类型：领用出库</p>
                                    <p class='mui-ellipsis'>备件：意美吉双头锯-继电器...</p>
                                </div>
                        </li>
                        <li class="mui-table-view-cell mui-media">
                                <div class="mui-media-body">
                                    <p class='mui-ellipsis'>CK-20190827001</p>
                                    <p class='mui-ellipsis'>仓库：仓库1</p>
                                    <p class='mui-ellipsis'>类型：领用出库</p>
                                    <p class='mui-ellipsis'>备件：意美吉双头锯-继电器...</p>
                                </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!--<div class="bottom_submit">-->
        <!--<input type="button" value="添加" id="add">-->
        <!--<input type="button" value="取消" id="cancel">-->
    <!--</div>-->
</div>


</body>
<script src="../../js/jquery-1.11.3.js"></script>
<script type="text/javascript" src="../../plugin/jqueryValidation/jqueryvalidate.js"></script>
<script type="text/javascript" src="../../plugin/jqueryValidation/messages_zh.js"></script>
<script src="../../js/mui.min.js"></script>
<script src="../../../script/api.js"></script>
<script type="text/javascript" charset="utf-8">
    mui.init();
    mui('body').on('tap','a',function(){
        window.top.location.href=this.href;
    });
    (function($) {
        $('#scroll').scroll({
            indicators: true //是否显示滚动条
        });
        $('#scroll0').scroll({
            indicators: true //是否显示滚动条
        });
        var segmentedControl = document.getElementById('segmentedControl');
        $('.mui-input-group').on('change', 'input', function() {
            if (this.checked) {
                var styleEl = document.querySelector('input[name="style"]:checked');
                var colorEl = document.querySelector('input[name="color"]:checked');
                if (styleEl && colorEl) {
                    var style = styleEl.value;
                    var color = colorEl.value;
                    segmentedControl.className = 'mui-segmented-control' + (style ? (' mui-segmented-control-' + style) : '') + ' mui-segmented-control-' + color;
                }
            }
        });
    })(mui);
//对话框

    function sparepartNumber(i,item){
       // e.detail.gesture.preventDefault(); //修复iOS 8.x平台存在的bug，使用plus.nativeUI.prompt会造成输入法闪一下又没了
        var btnArray = ['取消', '确定'];
        var info = $(item).find("span.infoSum");
        var info1= $(item).find("span.info");
        $(item).addClass("active");
        mui.prompt('备件数量：', '', '', btnArray, function(e) {
            if (e.index == 1) {
                var value=Number($(".mui-popup-input input").val());
                var int= /^\d+$/;
                // var isnumber=isNaN(value);  value<=0||value=="null"||isnumber==true||
                if(!(int.test(value))||value<=0||value=="null"){
                    alert("数据格式不对，请输入大于0的整数");
                    return;
                }
                info1.css("display","block");
                info.html(e.value);
            } else {
                info1.css("display","none");
                info.html(e.value);
            }
        })
    }

    //备件数量只能是大于0的整数
    $(document).on("blur",".mui-popup-input input",function(){
        // alert(2)
    })
    //提交
    $("input#submit").click(function(){
        window.location.href="maintenance_workorder.html?flag=submit";

    })

//    返回上一页
    $(document).on("click","span.mui-pull-left",function(){
        window.location.href="maintenance_workorder.html?flag=submit";
    })
    // 切换
    var ret;
    $(document).ready(function(){
        ret=window.location.href.split("?")[1];
        ret=JSON.stringify(ret).replace(/%22/g,"\"");
        ret=ret.substring(ret.indexOf("=")+1,ret.length-1);
        $("p.item1").click(function(){
            $("#item11").css("display","block");
            $("#item22").css("display","none");
        })
        $("p.item2").click(function(){
            $("#item22").css("display","block");
            $("#item11").css("display","none");
        })
    })

</script>
</html>